<template>
	<view>
		<u-navbar title="全部线索">
			<view slot="right" style="margin-right: 40upx;">
				<u-icon name="more-dot-fill" color="#333333" size="30"></u-icon>
			</view>
		</u-navbar>
		<view style="margin-top: 30upx; padding-bottom: 40upx; border-bottom: 5px solid #F4F9FE;">
			<view class="top">
				<view style="height: 49upx;line-height: 49upx;width: 130upx;text-align: center;">线索状态：</view>
				<view :class="oneFs == '1' ? 'btn-ff' : 'btn'" @click="oneFs = '1'">处理中</view>
				<view :class="oneFs == '2' ? 'btn-ff' : 'btn'" @click="oneFs = '2'">已预约</view>
				<view :class="oneFs == '3' ? 'btn-ff' : 'btn'" @click="oneFs = '3'">已试听</view>
				<view :class="oneFs == '4' ? 'btn-ff' : 'btn'" @click="oneFs = '4'">已报名</view>
			</view>
			<view class="bottom">
				<view style="height: 49upx;line-height: 49upx;width: 130upx;text-align: center;">分发机制：</view>
				<view :class="twofs == '1' ? 'btn-ff' : 'btn'" @click="twofs = '1'">首次分发</view>
				<view :class="twofs == '2' ? 'btn-ff' : 'btn'" @click="twofs = '2'">二次分发</view>
				<view :class="twofs == '3' ? 'btn-ff' : 'btn'" @click="twofs = '3'">三次分发</view>
				<view style="height: 49upx;line-height: 49upx;width: 130upx;text-align: right; color: #0081F1;" @click="getOpen"><image src="../../static/sx.png" style="width: 22upx;height: 21upx;padding-right: 5upx;"></image>筛选</view>
			</view>
		</view>
		<view>
			<view class="nav-bootom" v-if="oneFs == '1'">
				<view style="width: 100%;text-align: center;color: #8DBAF7;font-size: 26upx;">— 2021.04.10 —</view>
				<view class="nav-contain-bottom" v-for="(item,index) in data" :key="index" @click="getRouter(item.id, item.clue_agency_id)">
					<view class="top">
						<view class="font-24">分发日期：{{ item.create_data }}</view>
						<view class="font-24" style="color: #87B847;font-weight: bold;" v-if="item.status == '待处理'"><image src="../../static/ls.png" style="width: 31upx;height: 24upx;margin-right: 8upx;"></image>待处理</view>
						<view class="font-24" style="color: #F08200;font-weight: bold;" v-if="item.status == '考虑中'"><image src="../../static/ls1.png" style="width: 31upx;height: 24upx;margin-right: 8upx;"></image>考虑中</view>
						<view class="font-24" style="color: #F08200;font-weight: bold;" v-if="item.status == '已预约'"><image src="../../static/ls1.png" style="width: 31upx;height: 24upx;margin-right: 8upx;"></image>已预约</view>
						<view class="font-24" style="color: #F08200;font-weight: bold;" v-if="item.status == '已试听'"><image src="../../static/ls1.png" style="width: 31upx;height: 24upx;margin-right: 8upx;"></image>已试听</view>
						<view class="font-24" style="color: #E60012;font-weight: bold;" v-if="item.status == '无意向'"><image src="../../static/ls3.png" style="width: 31upx;height: 24upx;margin-right: 8upx;"></image>无意向</view>
						<view class="font-24" style="color: #0081F1;font-weight: bold;" v-if="item.status == '已报名'"><image src="../../static/ls2.png" style="width: 31upx;height: 24upx;margin-right: 8upx;"></image>已报名: 1436 元</view>
					</view>
					<view class="nav">
						<view>
							<view class="font-28">{{ item.unique_id }} {{ item.title }} {{ item.mobile }}</view>
							<view class="font-24" style="color: #666666;margin-top: 24upx;">{{ item.category_name_one }}-{{ item.category_name_two }}-{{ item.category_name_three }}</view>
						</view>
						<image src="../../static/gengduo.png" style="width: 28upx;height: 28upx;margin-right: 30upx;"></image>
					</view>
					<view class="bootom">
						<view class="bottom-address font-24">{{ item.province_name }}/{{ item.city_name }}/{{ item.area_name }}</view>
						<view class="font-24" style="margin-left: 22upx;"><image src="../../static/sj.png" style="width: 21upx;height: 21upx;"></image>{{ item.create_time }}</view>
						<view class="bottom-ff font-20">{{ item.send_count_text }}</view>
					</view>
				</view>
			</view>
		</view>
		<popup ref="child"></popup>
		<bottom/>
	</view>
</template>

<script>
	import popup from '../../components/popup/index.vue'
	import bottom from '../../components/bottom/index.vue'
	export default {
		components: { popup, bottom },
		data () {
			return {
				oneFs: '1',
				twofs: '2',
				data: []
			}
		},
		mounted() {
			this.getList()
		},
		methods:{
			getOpen(){
				this.$refs.child.getOpen()
			},
			getRouter (id, clue_agency_id) {
				uni.navigateTo({
					url: '/pages/index/detail?id=' + id + '&clue_agency_id='+ clue_agency_id
				})
			},
			getList (item) {
				this.param = item
					this.$request('', '/agencyApi/v1/agencyClueList', 'GET', this.param, {
					}).then(res => {
						this.data = res.data.data
						for (var i in this.data) {
							this.data[i].create_data = this.data[i].create_time.slice(0, 10)
							this.data[i].create_time = this.data[i].create_time.slice(11, 19)
							switch (this.data[i].status) {
								case 0:
								this.data[i].status = '待处理'
								break;
								case 1:
								this.data[i].status = '无意向'
								break;
								case 2:
								this.data[i].status = '考虑中'
								break;
								case 3:
								this.data[i].status = '已预约'
								break;
								case 4:
								this.data[i].status = '已试听'
								break;
								case 5:
								this.data[i].status = '已报名'
								break;
								case 6:
								this.data[i].status = '疑似报名'
								break;
							}
						}
						console.log(this.data)
					})
			}
		}
	}
</script>
<style>
	/deep/ .u-mode-center-box {
		height: auto !important;
	}
</style>

<style lang="less" scoped>
	.nav-bootom .top{
		margin-left: 0;
	}
	.btn{
		color: #666666;
		width: 120upx;
		height: 49upx;
		background: rgba(220, 234, 251, 0.3);
		border-radius: 8upx;
		margin-left: 19upx;
		text-align: center;
		line-height: 49upx;
	}
	.btn-ff{
		width: 125upx;
		height: 49upx;
		background: rgba(0, 129, 241, 1);
		border-radius: 8upx;
		text-align: center;
		line-height: 49upx;
		font-size: 26upx;
		margin-left: 10upx;
		color: #FFFFFF;
	}
	.top{
		display: flex;
		margin-left: 30upx;
		margin-right: 30upx;
		font-size: 26upx;
	}
	.bottom{
		display: flex;
		margin-left: 30upx;
		margin-right: 30upx;
		font-size: 26upx;
		margin-top: 30upx;
	}
	.nav-bootom{
		height: 100%;
		overflow-x: scroll;
		margin-top: 50upx;
		.nav-contain-bottom{
			width: 700upx;
			height: 275upx;
			background: #F7FCFF;
			border-radius: 10px;
			margin-top: 26upx;
			padding: 24upx;
			margin-bottom: 20upx;
			margin: 0 auto;
			margin-top: 30upx;
			.top{
				display: flex;
				justify-content: space-between;
			}
			.nav{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 27upx;
			}
			.bootom{
				display: flex;
				margin-top: 42upx;
				align-items: center;
				// margin-top: ;
				// padding-bottom: 10upx;
				.bottom-address{
					// width: 193upx;
					height: 43upx;
					border: 1upx solid #AAAAAA;
					border-radius: 6upx;
					text-align: center;
					line-height: 40upx;
				}
				.bottom-ff{
					width: 110upx;
					height: 40upx;
					background: rgba(0, 129, 243, 0.1);
					border-radius: 10upx;
					color: #0081F1;
					text-align: center;
					line-height: 40upx;
					margin-left: 23upx;
				}
			}
		}
	}
</style>
